<template>
	<view class="uni-flex-column content">
		<uni-search-bar 
			class="search-input" 
			radius="10" 
			placeholder="输入标题" 
			clearButton="always" 
			cancelButton="auto"
			@confirm="search1" 
			@cancel="search2"
		/>
		<view style="flex: 1;overflow: scroll">
			<view class="list" style="height: 100%;">
				<expand-list ref="expandlist">
					<template slot-scope="{ item, index }">
						<uni-list-item class="list-item list-box" :showArrow="false" :key="index" @click="onClickNoticeItem(item)">
							<view class="list-box">
								<image class="list-image" :src="$getImg(item.picture)"></image>
								<view class="list-text">
									<p class="list-text-title">{{item.title}}</p>
									<p class="list-text-p">发布类型:&nbsp;&nbsp;{{item.publicItem | optionsFilter(publicOptions)}}</p>
									<p class="list-text-p">发布人:&nbsp;&nbsp;{{item.userName}}
										<span style="color: #000000;float: right;">{{item.publicDate | dateFormat('yyyy-MM-dd')}}</span>
									</p>
								 
									<p class="list-text-status">
										<uni-tag 
											inverted 
											:type="item.status | optionsFilter(publishOptions,'type')"
											:text="item.status | optionsFilter(publishOptions)">
										</uni-tag>
									</p>
								</view>
							</view>
						</uni-list-item>
					</template>								
				</expand-list>
			</view>	
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import ExpandList from '@/components/expand/expand-list.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import { getNoticeList } from '@/api/common.js'
	import constants from '@/utils/constants.js'
	
	export default {
		components: {
			uniSearchBar,
			ExpandList,
			uniTag
		},
		onLoad() {
			this.$nextTick(()=>{
				this.loadData()
			})
		},
		data() {
			return {
				dataList: [],
				searchText: '',
				publicOptions: constants.publicOptions,
				publishOptions: constants.publishOptions
			}	
		},
		methods: {
			loadData() {
				this.$refs.expandlist.init(getNoticeList)
			},
			// 点击列表查看详情
			onClickNoticeItem(item) {
				uni.navigateTo({
					url: '/pages/notice/detail?noticeId='+item.id
				})
			},
			search1(e) {
				this.searchText = e.value
				this.queryData()
			},
			search2(e) {
				this.searchText = ''
				this.queryData()
			},
			queryData() {	  		
				const queryParams = []
				queryParams.push({
					key: "Q^TITLE_^SL",
					value: this.searchText
				})
				this.$refs.expandlist.query(queryParams)
			}
		}
	}
</script>

<style lang="scss">	
	page {
		background: $uni-bg-color-grey;
	}

	.content {
		font-size: $uni-font-size-base;
		background-color: $uni-bg-color-grey;
	
		.list {
			margin-top: 20upx;
	
			.list-box {
				display: flex;
				flex-direction: row;
	
				.list-image {
					height: 140upx;
					width: 140upx;
					margin-top: 6rpx;
				}
	
				.list-text {
					padding-left: 18upx;
					width: calc(100% - 160upx);
	
					.list-text-title {
						font-size: $uni-font-size-lg;
						margin-bottom: 4upx;
						min-height: 50upx;
						width: 80%;
					}
	
					.list-text-p {
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
						overflow: hidden;
						overflow: hidden;
						display: block;
						margin-bottom: 4rpx;
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
						line-height: 50upx;
					}
	
					.list-text-status {
						font-size: $uni-font-size-base;
						position: absolute;
						right: 20upx;
						top: 32upx;
						line-height: 30upx;
					}
				}
			}
		}
	}
	
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		width: 100%;
	}
</style>
